<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 许国辉
 * @Date: 2022-10-26 07:57:15
 * @LastEditors: 许国辉
 * @LastEditTime: 2023-10-06 16:36:46
-->
<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardListV" :key="item.title">
      <Card
        size="small"
        :loading="loading"
        :title="item.title"
        class="md:w-1/4 w-full !md:mt-0"
        :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
      >
        <template #extra>
          <Tag :color="item.color">{{ item.action }}</Tag>
        </template>

        <div class="py-4 px-4 flex justify-between items-center">
          <CountTo prefix="" :startVal="1" :endVal="item.value" class="text-2xl" />
          <Icon :icon="item.icon" :size="40" />
        </div>

        <div class="p-2 px-4 flex justify-between">
          <span>总{{ item.title }}</span>
          <CountTo prefix="" :startVal="1" :endVal="item.total" />
        </div>
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { CountTo } from '/@/components/CountTo/index';
  import { Icon } from '/@/components/Icon';
  import { Tag, Card } from 'ant-design-vue';
  // import { growCardList } from '../data';
  import { getAllJourneyStatistics } from '/@/api/sys/indexStatistics';
  import { nextTick, onMounted, ref } from 'vue';
  // import { IndexStatisticsModel } from '/@/api/sys/model/indexStatisticsModel';
  const growCardListV = ref();
  const getData = () => {
    getAllJourneyStatistics({ type: 'month' }).then((data) => {
      growCardListV.value = data;
    });
  };
  defineProps({
    loading: {
      type: Boolean,
    },
  });
  onMounted(() => {
    nextTick(() => {
      getData();
    });
  });
</script>
